<template>
  <view class="container">
    <!-- Swiper 轮播图 -->
    <swiper
      :indicator-dots="false"
      class="custom-swiper"
      @change="onSwiperChange"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      :circular="true"
      :style="containerHeight"
      :indicator-color="'rgba(255, 255, 255, 1)'"
      :indicator-active-color="'rgba(17, 204, 123, 1)'"
    >
      <!-- 每个 swiper-item 是一个轮播项 -->
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        @click="goToGoodsDetail(item)"
        class="swiper-card"
      >
        <view class="swiper-item">
          <image :src="item.img" class="swiper-img" mode="scaleToFill" />
        </view>
        <!-- <view class="swiper-item" :style="{ background: item.color }"> </view> -->
      </swiper-item>
    </swiper>
    <view class="custom-dots">
      <view
        v-for="(item, index) in swiperList.length"
        :key="index"
        :class="['dot', index === currentIndex ? 'active' : '']"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 轮播图数据
    swiperList: {
      type: Array,
      default: [],
    },
    // 标记是否有高度
    containerHeight: {
      type: Number | String,
      default: "",
    },
    // 标记是否有跳转项目
    mark: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 轮播图数据
      // swiperList: [
      //   {
      //     img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel1.png",
      //     color: "#007AFF",
      //   },
      //   {
      //     img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
      //     color: "#FF9500",
      //   },
      //   {
      //     img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel3.png",
      //     color: "#FF3B30",
      //   },
      // ],
      currentIndex: 0, // 当前滑块的索引
    };
  },
  methods: {
    onSwiperChange(event) {
      this.currentIndex = event.detail.current; // 更新当前索引
    },
    // 跳转秒杀商品详情
    goToGoodsDetail(data) {
      if (this.mark) this.$emit("goToGoodsDetail", data, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0px;
  position: relative;
  margin-bottom: 17.44rpx; /* 行间距 */
}
/* Swiper 容器样式 */
swiper {
  height: 322.67rpx; /* 设置 swiper 高度 */
  border-radius: 19rpx; /* 圆角 */
  overflow: hidden; /* 隐藏溢出部分 */
}

/* 每个轮播项的样式 */
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 高度占满父容器 */
  //   font-size: 32rpx;
  //   color: #fff;
  text-align: center;
}
/* 自定义指示点容器样式 */
.custom-dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: absolute;
  bottom: 20.47rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 自定义指示点样式 */
.dot {
  width: 12.21rpx;
  height: 12.21rpx;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 5px;
  transition: all 0.3s ease;
}

/* 选中状态指示点样式 */
.dot.active {
  border-radius: 30%;
  width: 37.88rpx;
  height: 12.21rpx;
  background-color: #fff;
}
.swiper-card {
  position: relative;
  z-index: 2;
}
.swiper-img {
  height: 100%;
  width: 100%;
}
</style>
